<template>
	<div class="container my-center-list">
		<!-- 个人信息头部 -->
		<div class="my-center-info">
			<img src="@/assets/images/bg.png" class="bg" />
			<div class="top-inner">
				<div class="top-left" style="display: flex;align-items: flex-end;">
					<div class="avatarurl">
						<img class="userinfo-avatar avatarurl" :src="uPhoto || require('@/assets/images/head.png')"
							mode="cover" />
					</div>
					<div class="info">
						<span class="userinfo-nickname">
							{{uUsername}}
							<span style="margin-left: 5px">欢迎您</span>
						</span>
					</div>
				</div>
			</div>
		</div>

		<!-- 功能菜单 -->
		<div class="my-center-bottom">
			<div class="v2" @click="myInfo">
				<div>
					<img src="@/assets/images/my/my_ico1.png" class="i5" />
					<span>个人信息</span>
				</div>
				<van-icon name="arrow" />
			</div>

			<div class="v2" @click="changePasswordClick">
				<div>
					<img src="@/assets/images/my/my_icon2.png" class="i5" />
					<span>修改密码</span>
				</div>
				<van-icon name="arrow" />
			</div>

			<div class="v2" @click="feedbackClick">
				<div>
					<img src="@/assets/images/my/my_ico3.png" class="i5" />
					<span>意见反馈</span>
				</div>
				<van-icon name="arrow" />
			</div>
		</div>

		<van-button type="primary" block class="submit-btn" @click="logOut">
			退出登录
		</van-button>
	</div>
</template>

<script>
	import {
		doLogoutMobile
	} from "@/api/mine.js"
	import {
		Toast
	} from 'vant';

	export default {
		name: 'UserCenter',

		data() {
			return {
				uPhoto: '',
				uUsername: ''
			}
		},

		created() {
			this.user = JSON.parse(localStorage.getItem('user'))
			this.uPhoto = this.user.uPhoto
			this.uUsername = this.user.uUsername
		},

		methods: {
			myInfo() {
				this.$router.push('/mineInfo')
			},

			changePasswordClick() {
				this.$router.push('/changePassword')
			},

			feedbackClick() {
				this.$router.push('/feedback')
			},

			logOut() {
				try {
					doLogoutMobile({
							openSessionId: localStorage.getItem("user").openSessionId,
							loginId: localStorage.getItem("user").uLoginId
						})
						.then(res => {
							if (res.code == 200) {
								Toast.success("退出登录成功");
								setTimeout(() => {
									localStorage.clear();
									this.$router.push('/login')
								}, 1000);
							} else {
								Toast.error(res.message);
							}
						})
				} catch (err) {
					Toast.fail('退出失败')
				} finally {
					this.isLoading = false
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-center-list {
		min-height: 100vh;
		background: #f8f8f8;
		padding: 0;
	}

	.my-center-info {
		width: 100%;
		position: relative;

		.bg {
			position: absolute;
			width: 100%;
			height: 166.5px;
			top: 0;
			left: 0;
			z-index: 1;
		}
	}

	.top-inner {
		width: 90%;
		margin: 0 auto;
		padding: 20px 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		z-index: 2;
	}

	.avatarurl {
		width: 65px;
		height: 65px;
		background: #fff;
		border-radius: 50%;
		margin-right: 15px;
		overflow: hidden;
	}

	.my-center-bottom {
		background: #fff;
		border-radius: 5px;
		margin: 12px;
		padding: 16px;
		position: relative;
		z-index: 1;

		.v2 {
			height: 55px;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #ccc;

			img.i5 {
				width: 45px;
				height: 45px;
				margin-right: 10px;
				vertical-align: middle;
			}

			span {
				font-size: 14px;
				color: #666;
			}
		}
	}

	.submit-btn {
		width: 90%;
		margin: 30px auto;
		color: #fff;
		background-color: #1989fa;
		border: 1px solid #1989fa;
	}
</style>